<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>消息</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/message/list.css" rel="stylesheet"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/vue-common.js"></script>
    <style>
        .no-message{
            width: 100%;
            margin-top: 5rem;
        }
        .no-message-box{
            overflow: hidden;
            width: 50%;
            margin: 0 auto;
            position: absolute;
            top:30%;
            left: 25%;

        }
        #app{
            height: 100%;
        }
        .bg-color{
            background-color: #fff;
        }

    </style>

</head>
<body>

<div id="app" :class="{'bg-color':pageParams.list.length == 0}">
    <div class="nav-bg-box"></div>
    <div v-if="pageParams.list.length > 0" class="message-box">
        <div class="message-box-item" v-for="item in pageParams.list" :key="item.id">
            <div class="img-box">
                <img src="../../img/message/ic_news_start@3x.png" alt="">
            </div>
            <div class="time-text"> {{item.createDate | dataFormat}}</div>
            <div>
                <div class="content-title"> {{item.title}}</div>
                <div class="content-text">
                    {{item.content}}
                </div>
            </div>
        </div>

    </div>

    <div class="no-message-box" v-else >
        <img class="no-message" src="../../img/message/img_nomessage@3x.png" alt="">
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: '消息页面',
            bottomTitle: '点击加载更多',
            pageParams: {
                pageSize: 20,
                pageNo: 1,
                list: [],
            },
        },
        methods: {
            //加载列表
            refresh: function () {
                var params = {
                    pageNo: 1,
                    pageSize: 20,
                }
                vm.bottomTitle = '点击加载更多';
                Resource.get(MESSAGE_LIST_API, params, function (res) {
                    vm.pageParams.list = res.list;
                    if (res.list.length == 0) {
                        //mui.toast('没有更多了',{duration:1000,type:"div"});
                        vm.bottomTitle = '没有更多了';
                        return;
                    }
                })
            },
            moreData: function () {
                this.pageParams.pageNo++;
                var params = {
                    pageNo: this.pageParams.pageNo,
                    pageSize: this.pageParams.pageSize,
                }
                Resource.get(MESSAGE_LIST_API, params, function (res) {
                    vm.pageParams.list = vm.pageParams.list.concat(res.list);
                    if (res.list.length == 0) {
                        //mui.toast('没有更多了',{duration:1000,type:"div"});
                        vm.bottomTitle = '没有更多了';
                        return;
                    }
                })
            }
        }
    });
    mui.init({

    })
    document.addEventListener('changeTab',function () {
        vm.refresh();
        //清理消息
        var main = plus.webview.getLaunchWebview();
        mui.fire(main, 'clearMessage', {});
    })
</script>
<script>
    // 禁用回退
    mui.init({
        beforeback: function(){
            return false;
        }
    });
</script>

</body>
</html>